<template>
  <div class="component-container">
    <h2>Provide/Inject 跨级组件通信示例</h2>
    <p>根组件的主题: {{ currentTheme }}</p>
    <p>用户信息: {{ userInfo.name }}</p>
    
    <div>
      <button @click="toggleTheme">切换主题</button>
      <button @click="updateUser">更新用户信息</button>
    </div>
    
    <IntermediateComponent />
  </div>
</template>

<script setup>
import { ref, reactive, provide, readonly } from 'vue'
import IntermediateComponent from './IntermediateComponent.vue'

// 响应式数据
const currentTheme = ref('light')
const userInfo = reactive({
  name: '李四',
  age: 30,
  email: 'lisi@example.com'
})

// 提供响应式数据
provide('theme', readonly(currentTheme))
provide('userInfo', readonly(userInfo))
provide('toggleTheme', toggleTheme)
provide('updateUser', updateUser)

// 方法
function toggleTheme() {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light'
}

function updateUser() {
  userInfo.name = '王五'
  userInfo.age = 35
}
</script>

<style scoped>
.component-container button {
  margin: 0 5px;
  padding: 8px 12px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.component-container button:hover {
  background-color: #369870;
}
</style>